<template>
  <section class="page-frame">
    <section
      v-for="index in 4"
      :key="index"
    >
      <div/>
    </section>
  </section>
</template>

<style lang="less" scoped>
.page-frame {
  width: 100vw;
  height: 100vh;
  position: fixed;
  pointer-events: none;
  section {
    padding: 10px;
    position: absolute;
    &:nth-child(2) {
      right: 0;
      transform: rotateZ(90deg);
    }
    &:nth-child(3) {
      bottom: 0;
      transform: rotateZ(-90deg);
    }
    &:nth-child(4) {
      right: 0;
      bottom: 0;
      transform: rotateZ(180deg);
    }
    div {
      width: 25px;
      height: 25px;
      border-radius: 4px;
      position: relative;
      background-color: #817487;
      &::before,
      &::after {
        content: '';
        display: block;
        width: 12px;
        height: 12px;
        position: absolute;
        border-radius: 4px;
        background-color: #817487;
      }
      &::before {
        top: 0;
        left: 120%;
      }
      &::after {
        top: 120%;
        left: 0;
      }
    }
  }
}
</style>
